<template>
  <view class="type-wrapper">
   <view class="type-item">
      <view class="item-content">
        <!-- 未登录状态 -->
       <template v-if="!isLogin">
          <view class="login-info">
            <image class="default-avatar" src="/static/home/defaultPic.jpg" mode="aspectFill"></image>
            <view class="login-text">
              <text class="welcome-text">欢迎来到GVR服务平台</text>
              <text class="login-desc">请登录/注册</text>
            </view>
			<view class="login-btn">
				 <view class="bonus-btn" @click="handleLogin">登陆/注册</view>
				 <text class="bonus-text">新用户注册得积分好礼</text>
			</view>
           
          </view>
        </template>
		
       <template v-else> 
          <view class="user-info">
            <image class="default-avatar" :src="userInfo.avatar || '/static/home/defaultPic.jpg'" mode="aspectFill"></image>
            <view class="info-text">
              <text class="name">{{ getUserName }}</text>
              <text class="org-name">{{ getOrgInfo }}</text>
            </view>
            <image v-if="showQrCode" class="qr-code" src="/static/qr.png" mode="aspectFit"></image>
          </view>
        </template>
      </view>
    </view>
    <view class="type-background"></view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { USER_TYPES,MEMBER_ROLES} from '@/service/api'

const props = defineProps({
  isLogin: {
    type: Boolean,
    default: false
  },
  userInfo: {
    type: Object,
    default: () => ({})
  }
})

const emit = defineEmits(['login'])

// 处理登录点击
const handleLogin = () => {
  emit('login')
}

// 计算用户显示名称
const getUserName = computed(() => {
  if (!props.userInfo) return ''
  
  let name = props.userInfo?.userInfo?.real_name || props.userInfo?.name || ''
  
  // 根据角色添加后缀
  if (props.userInfo?.type === USER_TYPES.GAS && props.userInfo?.member?.role  === MEMBER_ROLES.DIRECTOR) {
    name += '（站长）'
  } else if (props.userInfo?.role === USER_TYPES.MAINTENANCE && props.userInfo?.member?.role === MEMBER_ROLES.DIRECTOR) {
    name += '（管理员）'
  }
  
  return name
})

// 计算组织信息显示
const getOrgInfo = computed(() => {
  if (!props.userInfo) return ''
  
  switch(props.userInfo?.type) {
    case USER_TYPES.CLIENT:
      return '行业用户'
    case USER_TYPES.SUPPLIER:
      return '设备供应商'
    case USER_TYPES.GAS:
      return props.userInfo?.member?.orgName || ''
    case USER_TYPES.MAINTENANCE:
      return props.userInfo?.member?.orgName || ''
    default:
      return ''
  }
})

// 是否显示二维码
const showQrCode = computed(() => {
	return ''
  //return props.userInfo?.role === USER_TYPES.GAS || props.userInfo?.role === USER_TYPES.MAINTENANCE
})
</script>

<style scoped>
.type-wrapper {
  position: relative;
/*  margin: 0 40rpx; */
 /* margin-top: -62rpx; */
  height: 164rpx;
}

.type-item {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  border-radius: 20rpx;
  width: 98%;
  height: 140rpx;
  box-shadow: 0px 0px 12rpx 0px rgba(173,173,173,0.5);
}

.type-background {
  position: absolute;
  z-index: 1;
  left: 0rpx;
  top: 10rpx;
  width: 100%;
  height: 144rpx;
  border-radius: 20rpx;
  transition: all 0.3s ease;
  background: #FAC653;

}

.item-content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90%;
  height: 80%;
  padding: 0rpx 30rpx;
}


/* 未登录状态样式 */
.login-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}

.default-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
  margin-right: 36rpx;
  background: #F2F3F5;
  border: 2rpx solid rgba(250,198,83,1);
}

.login-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-right: 70rpx;
}

.welcome-text {
  font-family: PingFangSC-Medium;
  font-size: 24rpx;
  color: #000000;
  letter-spacing: 0;
  font-weight: 500;
}

.login-desc {
  font-family: PingFangSC-Light;
  font-size: 20rpx;
  color: #515151;
  letter-spacing: 0;
  font-weight: 200;
}

.login-btn {
	display: flex;
	flex-direction: column;
}
.bonus-btn {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 154rpx;
	height: 44rpx ;
	background: #FAC653;
	border-radius: 10rpx;
	font-family: PingFangSC-Medium;
	font-size: 24rpx;
	color: #000000;
	letter-spacing: 0;
	text-align: center;
	font-weight: 500;
}

.bonus-text {
 margin-top: 2rpx;
 font-family: PingFangSC-Medium;
 font-size: 16rpx;
 color: #285789;
 letter-spacing: 0;
 text-align: center;
 font-weight: 500;
}

/* 已登录状态样式 */
.user-info {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
}

.avatar {
  width: 40rpx;
  height: 40rpx;
  border-radius: 40rpx;
  margin-right: 36rpx;
  border: 2rpx solid rgba(250,198,83,1);
}

.info-text {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.name {
	font-family: PingFangSC-Medium;
	font-size: 24rpx;
	color: #000000;
	letter-spacing: 0;
	font-weight: 500;
}

.org-name {
  font-family: PingFangSC-Light;
  font-size: 20rpx;
  color: #515151;
  letter-spacing: 0;
  font-weight: 200;
}

.qr-code {
  width: 48rpx;
  height: 48rpx;
}
</style> 